<template>
  <f-form-layout ref="formRef" v-bind="formOptions" :model="fromMode" class="" />
  <f-button class="" @click="handleClose">关闭useTrendsComp</f-button>
  {{ fromMode }}
  <f-dropdown :trigger="['click']">
    <a>dropdown</a>
    <template #overlay>
      <f-menu>
        <f-menu-item>
          <a href="javascript:;">1st menu item</a>
        </f-menu-item>
        <f-menu-item>
          <a href="javascript:;">2nd menu item</a>
        </f-menu-item>
        <f-menu-item>
          <a href="javascript:;">3rd menu item</a>
        </f-menu-item>
      </f-menu>
    </template>
  </f-dropdown>
  <f-dropdown-button :trigger="['click']">
    dropdown
    <template #overlay>
      <f-menu>
        <f-menu-item>
          <a href="javascript:;">1st menu item</a>
        </f-menu-item>
        <f-menu-item>
          <a href="javascript:;">2nd menu item</a>
        </f-menu-item>
        <f-menu-item>
          <a href="javascript:;">3rd menu item</a>
        </f-menu-item>
      </f-menu>
    </template>
  </f-dropdown-button>
</template>

<script lang="ts" setup>
import { reactive, watch, ref } from 'vue';

const props = defineProps({
  id: String,
  guid: String,
  row: Object,
  zzCancel: Function
});

watch(() => props.id, (data) => {
  console.log('props', props);
  fromMode.value = { name: props.id, english: props.guid };
  // formOptions.columns[0].columns.push({ field: 'zhangzhao', label: 'zhangzhao' });
  // console.log('formOptions', formOptions);
});

defineExpose({
  // 方法一 ** 推荐使用 **
  confirm: () => handleForm()
  // // 方法二
  // confirm: ({ cancel, loading }: { cancel: () => void, loading: () => void }) => handleForm({ cancel, loading })
});

const formRef = ref();

const fromMode = ref({ name: props.id, english: props.guid });

const formOptions = reactive({
  // layout: 'inline',
  // model: ,
  colSpan: 8,
  columns: [
    { field: 'name', label: '机构名称', required: true, span: 16 },
    { field: 'simpleName', label: '公司简称', required: true },
    { field: 'english', label: '英文名' },
    { field: 'uscrDP', label: '统一社会信息代码' },
    { field: 'code', label: '机构编码' },
    { field: 'institutionType', label: '机构类型', type: 'dictionary', props: { code: 'ZZJGLB' } },
    { field: 'registerType', label: '登记注册类型', type: 'dictionary', props: { code: 'DJZCLXDM' } },
    { field: 'industry', label: '经营行业', type: 'dictionary', props: { code: 'SSHYDM' } },
    { field: 'registerCapital', label: '注册资本（金）', type: 'input-number' },
    { field: 'businessScope', label: '经营或业务范围', span: 16 },
    { field: 'affiliation', label: '隶属关系', type: 'dictionary', props: { code: 'DWLSGXDM' } },
    { field: 'regionalismCode', label: '行政区划', type: 'region-tree' },
    { field: 'addrRegister', label: '单位注册地址', span: 16 },
    { field: 'postCodeDP', label: '邮政编码' },
    { field: 'contactTelDP', label: '联系电话' },
    { field: 'mailbox', label: '邮箱' },
    { field: 'domain', label: '网址' },
    { field: 'legalName', label: '企业法人代表' },
    { field: 'legalIdType', label: '证件类型', type: 'dictionary', props: { code: 'SFZJLBDM' } },
    { field: 'legalIdCard', label: '证件号' },
    { field: 'establishedDate', label: '成立日期', type: 'date-picker', props: { format: "YYYY-MM-DD", valueFormat: "YYYY-MM-DD" } },
    { field: 'toDate', label: '有效期至', type: 'date-picker', props: { format: "YYYY-MM-DD", valueFormat: "YYYY-MM-DD" } },
    { field: 'signOrg', label: '登记批准机构' },
    { field: 'approvalNo', label: '批准文号或注册号' },
    { field: 'isBranch', label: '启动二级院区', type: 'switch', valueKey: 'checked' }
  ]
});

// // 方法二
// const handleForm = ({ cancel, loading }: { cancel: (v: any) => void, loading: (v: boolean) => void }) => {
//   loading(true);
//   formRef.value?.validate().then(() => {
//     console.log('success');
//     setTimeout(() => {
//       cancel(formOptions.model);
//       loading(false);
//     }, 1000 * 3);
//   });
// };

// 方法一 ** 推荐使用 **
const handleForm = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(fromMode.value);
    }, 1000 * 3);
  });
};

const handleClose = () => {
  console.log('关闭', props);
  props?.zzCancel?.();
};

</script>
<style lang="scss" scoped>
</style>